<!-- 数字大屏 -->
<template>
  <div class="screen"
    style="background-color: #f0f2f5; display: flex; height: 100%; flex-direction: column; gap: 14px; overflow-y: hidden">
    <el-row align="center" style="padding-top: 3px; height: 28px; display: flex; align-items: center;padding-left: 20px">
      <el-col :span="1">
        年份：
      </el-col>
      <el-col :span="3">
        <el-select v-model="yearValue" placeholder="请选择">
          <el-option v-for="item in options" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <span class="tips">数据截止至{{ getDate() }}</span>
      </el-col>
      <el-col :span="4">
        <el-upload ref="upload" class="upload-demo" :file-list="shpFileList" :action="importBaiyunProjectExcel"
          name="file" :limit="1" :on-success="handleOnUploadExcelSuccess"
          :on-change="handleOnUploadChange" :show-file-list="false">
          <template #trigger>
            <el-button type="primary">上传数据</el-button>
          </template>
        </el-upload>
      </el-col>
    </el-row>
    <div
      style="background-color: white; padding-top: 14px; display: flex; height: 48%; flex-direction: column; gap: 14px">
      <FirstRow :year="yearValue" style="height: 37.5%;" />
      <SecondRow :year="yearValue" style="height: 62.5%;" />
    </div>
    <ThirdRow :year="yearValue" style="height: 44%; background-color: white;padding-left: 20px" />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import FirstRow from "./component/FirstRow/FirstRow.vue";
import SecondRow from "./component/SecondRow/SecondRow.vue";
import ThirdRow from "./component/ThirdRow/ThirdRow.vue";
import { getYears } from "@/api/screenApi.js";
import { importBaiyunProjectExcel } from '@/api/dataApi'
import { ElMessage } from "element-plus";
const yearValue = ref("");
const options = ref([]);

onMounted(() => {
  getYears().then((res) => {
    options.value.push(...res.data.data);
    yearValue.value = options.value[0];
  });
});

const handleOnUploadChange = (e) => {
  console.log("change", e);
}

const handleOnUploadExcelSuccess = () => {
  ElMessage.success("上传成功");
}

const getDate = () => {
  let date = new Date();
  // 规范到YYYY年MM月DD日
  return date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日';
};
</script>

<style scoped>
.tips {
  /* color: #AEAEB2; */
  margin-left: 5px;
  font-size: 14px;
  font-weight: 500;
}
</style>
